<template>
    <div>
        <h1>求和的结果是：{{sum}}</h1>

        <div>
            <select v-model="selectValue">
                <option :value="1">1</option>
                 <option :value="2">2</option>
                  <option :value="3">3</option>
            </select> &nbsp; &nbsp; &nbsp;

            <button @click="increment">+</button> &nbsp; &nbsp; &nbsp;
            <button @click="decrement">-</button> &nbsp; &nbsp; &nbsp;
            <button @click="incrementWhenOdd">当是奇数的时候+</button>&nbsp; &nbsp; &nbsp;
            <button @click="incrementWait" >等一等再加</button>
        </div>
    </div>
</template>

<script>

export default {
    name:"MyCounter",
   data(){
       return{
           sum:0,
           selectValue:1,
       }
   },
   methods:{
       increment(){
           this.sum += this.selectValue
       },
       decrement(){
           this.sum -= this.selectValue
       },

       incrementWhenOdd(){

        if(this.sum % 2===1){
            this.increment()
        }
        
       },

       incrementWait(){

           setTimeout(()=>{
               this.increment()
           },500)
       }

   }
}
</script>
